<div class="settings-child-view">
    <div layout-padding>

        <div layout="row" layout-xs="column" layout-align-xs="center center">
            <div layout="row" layout-align="start center" layout-align-xs="center center" style="width: 100%;">
                <eb-back-to-table state="{{vm.backState}}" params="vm.stateParams"></eb-back-to-table>
            </div>

            <div layout="row" layout-align="end center" layout-align-xs="center center" style="width: 100%;">
                <eb-details-paginator table-data="vm.tableData"
                                      tooltip-property="displayName"
                                      on-change="vm.onChangeDevice(entry)"
                                      current-entry="vm.device">
                </eb-details-paginator>
            </div>
        </div>

        <div>
            <md-divider></md-divider>
        </div>

        <!-- content -->
        <div flex-gt-md="95" style="height: 100%;" layout="column">

            <div class="config-frame md-whiteframe-z1" layout="column">
                <div>
                    <h3 style="margin: 0;" class="eb-table-details-view">
                        {{'ADMINCONSOLE.DEVICES_LIST.DETAILS.HEADING' | translate}}
                    </h3>
                </div>

                <div layout="row" layout-xs="column" layout-align="start start" style="padding-top: 16px; width: 100%;">
                    <div flex-gt-xs="33" flex-lg="25" flex-gt-lg="25" style="width: 100%;">
                        <eb-label-container label="{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_IP' | translate}}" config="vm.deviceIp"></eb-label-container>
                    </div>
                    <div flex-gt-xs="33" flex-lg="25" flex-gt-lg="25" style="width: 100%;">
                        <eb-label-container label="{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_MAC' | translate}}" config="vm.deviceMac"></eb-label-container>
                    </div>
                    <div flex-gt-xs="33" flex-lg="25" flex-gt-lg="25" style="width: 100%;">
                        <eb-label-container label="{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_VENDOR' | translate}}" config="vm.deviceVendor"></eb-label-container>
                    </div>
                </div>

                <!-- **** Edit -->
                <div layout="row" layout-align="start center" style="width: 100%;">
                    <div flex-gt-xs="33" flex-lg="25" flex-gt-lg="25" style="width: 100%;">
                        <eb-label-container is-edit="vm.editable(vm.device)" edit-callback="vm.editName($event, vm.device)"
                                            style="margin-bottom: 15px;" label="{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_NAME' | translate}}" config="vm.deviceName"></eb-label-container>
                    </div>
                </div>
            </div>


            <!-- Main switch -->
            <div class="config-frame md-whiteframe-z1" layout="column">
                <div ng-if="vm.device.isGateway" style="padding-left: 16px;">
                    <p>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_IS_GATEWAY' | translate }}</p>
                </div>
                <div ng-if="vm.device.isEblocker" style="padding-left: 16px;">
                    <p>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_IS_EBLOCKER' | translate}}</p>
                </div>

                <div ng-if="!vm.device.isGateway && !vm.device.isEblocker" layout="column" layout-align="start start">
                    <div>
                        <md-switch md-theme="eBlockerThemeSwitch"
                                   layout="row" layout-align="center center" layout-padding
                                   class="md-primary switch-word-break"
                                   ng-model="vm.device.pausedOrEnabled"
                                   ng-change="vm.onChangeEnabled(vm.device)"
                                   ng-disabled="vm.isUpdatingDevice">
                            {{ vm.device.pausedOrEnabled ? 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_ENABLED_EBLOCKER' : 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_DISABLED_EBLOCKER' | translate }}
                        </md-switch>
                    </div>
                </div>

                <!-- workaround: otherwise switch labels overlap on small devices -->
                <div hide-gt-xs style="margin-top: 20px;"></div>

                <div ng-if="!vm.device.isGateway && !vm.device.isEblocker" layout="column" layout-align="start start">
                    <div ng-if="vm.pausingAllowed !== false" layout="row" layout-align="start center">
                        <md-switch md-theme="eBlockerThemeSwitch" class="md-primary switch-word-break"
                                   layout="row" layout-align="center center" layout-padding
                                   ng-model="vm.device.paused"
                                   ng-change="vm.onChangePaused(vm.device)"
                                   ng-disabled="!vm.device.pausedOrEnabled || vm.pauseStatusPending || vm.isUpdatingDevice">
                            <span ng-hide="vm.device.paused" translate="ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_NOT_PAUSE_EBLOCKER"></span>
                            <span ng-show="vm.device.paused && vm.pauseRemaining > 0">{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_PAUSE_EBLOCKER_COUNTDOWN' | translate:{min: vm.getPauseMinutes(), sec: vm.getPauseSeconds()} }}</span>
                            <span ng-show="vm.device.paused && (vm.pauseRemaining === undefined || vm.pauseRemaining <= 0)">{{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_PAUSE_EBLOCKER' | translate }}</span>
                        </md-switch>
                    </div>

                    <div ng-if="vm.device.pausedOrEnabled && vm.pausingAllowed === false" layout="row" layout-align="start center" layout-padding>
                        <span translate="ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_PAUSE_NOT_ALLOWED"></span>
                    </div>
                </div>

                <div ng-if="!vm.isUpdatingDevice && !vm.spinnerDelay && !vm.device.isGateway && !vm.device.isEblocker" style="padding-top: 26px;">
                </div>

                <div ng-if="vm.isUpdatingDevice || vm.spinnerDelay"
                     layout="row" layout="start center"
                     style="padding-left: 8px;">
                    <div>
                        <md-progress-circular md-mode="indeterminate" md-diameter="26"></md-progress-circular>
                    </div>
                    <span style="padding-left: 16px;" translate="ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_DEVICE_UPDATING"></span>
                </div>

                <!-- workaround: otherwise switch labels overlap on small devices -->
                <div hide-gt-xs style="margin-top: 20px;" ng-if="vm.dhcpActive"></div>


                <!-- Fixed IP Switch (DHCP) -->
                <div ng-if="vm.dhcpActive">
                    <md-switch md-theme="eBlockerThemeSwitch" layout-padding layout="row" layout-align="start center" ng-model="vm.device.ipAddressFixed" class="md-primary switch-word-break" ng-change="vm.onChange(vm.device)">
                        {{ vm.device.ipAddressFixed ? 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_IP_ADDRESS_FIXED' : 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_IP_ADDRESS_NOT_FIXED' | translate }}
                    </md-switch>
                </div>
            </div>

            <div class="config-frame md-whiteframe-z1"
                 layout="column" ng-if="!vm.device.isGateway && !vm.device.isEblocker">
                <!-- Reset button -->
                <div>
                    <md-button class="md-raised eb-delete-button"
                               ng-click="vm.onResetDevice(vm.device)"
                               aria-label="{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_RESET_DEVICE' | translate }}">
                        {{'ADMINCONSOLE.DEVICES_LIST.DETAILS.GENERAL.LABEL_RESET_DEVICE' | translate}}
                    </md-button>
                </div>
            </div>

            <div class="config-frame md-whiteframe-z1" ng-if="!vm.device.isGateway && !vm.device.isEblocker && vm.device.pausedOrEnabled">
                <md-tabs md-border-bottom
                         md-swipe-content
                         md-dynamic-height>

                    <!-- USER -->
                    <md-tab ng-if="vm.hasFeature('FAM')">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.USERS.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-users.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- ANONYMIZATION -->
                    <md-tab ng-disabled="!vm.hasFeature('BAS')">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.ANON.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-anon.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- MOBILE -->
                    <md-tab ng-disabled="!vm.vpnHomeStatus.isRunning || !vm.hasFeature('PRO')">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.MOBILE.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-mobile.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- FILTERS -->
                    <md-tab ng-disabled="!vm.hasFeature('PRO')">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.FILTERS.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-filters.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- HTTPS -->
                    <md-tab ng-disabled="!vm.hasFeature('PRO')" ng-if="vm.sslGloballyEnabled">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.HTTPS.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-https.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- ICON / CONTROLBAR -->
                    <md-tab>
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.ICON.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-icon.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                    <!-- MESSAGES -->
                    <md-tab ng-disabled="!vm.hasFeature('BAS')">
                        <md-tab-label>{{ 'ADMINCONSOLE.DEVICES_LIST.DETAILS.MESSAGES.TAB_LABEL' | translate }}</md-tab-label>
                        <md-tab-body>
                            <ng-include src="'app/components/devices/list/devices-details-messages.component.html'"></ng-include>
                        </md-tab-body>
                    </md-tab>

                </md-tabs>
            </div>
        </div>
        <!-- Content end -->
    </div>
</div>
